<template>
  <p-form-model :model="form" :rules="rules">
    <div class="item item-left">
      <p-form-model-item :label="label.serialNumber" prop="serialNumber">
        <span>{{ form.serialNumber }}</span>
      </p-form-model-item>
      <p-form-model-item :label="label.name" prop="name">
        <span>{{ form.name }}</span>
      </p-form-model-item>
      <p-form-model-item :label="label.startTime" prop="startTime">
        <span>
          {{ form.startTime | formatDate('YYYY-MM') }} -
          {{ form.endTime | formatDate('YYYY-MM') }}
        </span>
      </p-form-model-item>
      <p-form-model-item :label="label.name" prop="operatingOrganization">
        <span>{{ form.operatingOrganization }}</span>
      </p-form-model-item>
    </div>
    <div class="item item-right">
      <p-form-model-item :label="label.state">
        <span>{{ stateOptions[form.state] }}</span>
      </p-form-model-item>
      <p-form-model-item
        :label="label.salesOrganization"
        prop="salesOrganization"
      >
        <span>{{ orgOptions[form.salesOrganization] }}</span>
      </p-form-model-item>
      <p-form-model-item :label="label.deadlineTime" prop="deadline">
        <span>{{ form.deadline }}</span>
      </p-form-model-item>
      <p-form-model-item :label="label.name" prop="responsibleName">
        <span>{{ form.responsibleName }}</span>
      </p-form-model-item>
    </div>
  </p-form-model>
</template>

<script>
import { FORECAST_TYPE as PAGE_TYPE } from '@/constants/index';

export default {
  props: {
    form: {
      type: Object,
      default: () => ({}),
    },
    pageType: {
      type: String,
      default: 'BP',
    },
  },
  data() {
    return {};
  },
  computed: {
    label() {
      return {
        serialNumber: `${PAGE_TYPE[this.pageType]}编号`,
        name: `${PAGE_TYPE[this.pageType]}名称`,
        startTime: `${PAGE_TYPE[this.pageType]}长度区间`,
        state: '当前状态',
        salesOrganization: '销售组织',
        deadlineTime: '录入截止时间',
        operatingOrganization: '运营部门',
        responsibleName: '运营责任人',
      };
    },
    orgOptions() {
      return this.$store.state.dictionary.dict['ltcsmsizebu'] || {};
    },
    stateOptions() {
      return this.$store.state.dictionary.dict['state'] || {};
    },
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.poros-form {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.poros-form-item {
  display: flex;
  margin-bottom: 0;
}
.item {
  width: 48%;
  display: inline-block;
}
// .poros-form-item {
//   width: 48%;
// }
/deep/ .poros-form-item-label {
  width: 120px;
  margin-right: 20px;
}
/deep/ .poros-form-item-control-wrapper {
  width: calc(100% - 180px);
}
</style>
